<template>
  <div class="page-container" :style="{ background: bgColor }">
    <!-- 标题 -->
    <div class="navigation" ref="navigation" :style="{ fontSize: titleSize + 'px', color: titleColor }">
      农业数据实时监控系统</div>
    <div class="changeTheme" @click="change">主题切换</div>
    <!-- 底部数据 -->
    <div class="content">
      <!-- 左侧盒子 -->
      <div class="left-content">
        <div class="left-content-top">
          <AreaTopPage></AreaTopPage>
        </div>
        <div class="left-content-bottom">
          <plantingHarvestPage></plantingHarvestPage>
        </div>
      </div>
      <!-- 中间盒子 -->
      <div class="center-content">
        <div class="center-content-top">
          <AreasProportionPage></AreasProportionPage>
        </div>
        <div class="center-content-bottom">
          <CropCoveragePage></CropCoveragePage>
        </div>
      </div>
      <!-- 右侧盒子 -->
      <div class="right-content">
        <div class="right-content-top">
          <GrowthTrendPage></GrowthTrendPage>
        </div>
        <div class="right-content-bottom">
          <TotalAreaPage></TotalAreaPage>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import AreaTopPage from './AreaTopPage.vue'  //各地区
import AreasProportionPage from './AreasProportionPage.vue' //主要地区种植占比
import CropCoveragePage from './CropCoveragePage.vue' //地图
import GrowthTrendPage from './GrowthTrendPage.vue' //种植增长趋势
import TotalAreaPage from './TotalAreaPage.vue' //种植面积统计
import plantingHarvestPage from './plantingHarvestPage.vue'  //全国种植每月收成情况
export default {
  data() {
    return {
      titleSize: 0,
      bgColor: "#fff",
      titleColor: '#000',
      isOn: true
    }
  },
  mounted() {
    this.screen()
    window.addEventListener('resize', this.screen)
  },
  methods: {
    screen() {
      this.titleSize = this.$refs.navigation.offsetWidth / 40
    },
    // 切换主题
    change() {
      this.isOn = !this.isOn
      if (this.isOn) {
        this.bgColor = '#fff'
        this.titleColor = '#000'
      } else {
        this.bgColor = '#000'
        this.titleColor = '#fff'
      }
      this.$store.commit('change', this.isOn)
    }
  },
  watch: {},
  computed: {},
  filters: {},
  components: {
    AreaTopPage,
    AreasProportionPage,
    CropCoveragePage,
    GrowthTrendPage,
    TotalAreaPage,
    plantingHarvestPage
  }
}
</script>
<style scoped>
.page-container {
  display: flex;
  flex-direction: column;
}

/* 标题样式 */
.navigation {
  flex:2;
  width:100%;
  background-image: url(../../public/top02.png);
  background-position: center bottom;
  background-repeat: no-repeat;
  font-weight: 600;
  color: #000;
  text-align: center;
}

.content {
  flex: 15;
  display: flex;
}

/* 左 */
.content .left-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.content .left-content .left-content-top {
  width: 95%;
  height: 53%;
  border: 1px solid aqua;
}

.content .left-content .left-content-bottom {
  width: 95%;
  height: 42%;
  border: 1px solid aqua;
}

/* 中间 */
.content .center-content {
  flex: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.content .center-content .center-content-top {
  width: 95%;
  height: 22%;
  border: 1px solid aqua;
}

.content .center-content .center-content-bottom {
  width: 95%;
  height: 75%;
  border: 1px solid aqua;
}

/* 右 */
.content .right-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.content .right-content .right-content-top {
  width: 95%;
  height: 48%;
  border: 1px solid aqua;
}

.content .right-content .right-content-bottom {
  width: 95%;
  height: 48%;
  border: 1px solid aqua;
}

/* 主题切换 */
.changeTheme {
  color: #4CD964;
  position: fixed;
  top: 0.625rem;
  right: 1.25rem
}
</style>